React文件预览,React实现在线预览docx，xslx，pdf格式文件

您所在的位置：网站首页 › perfect viewer分页 › React文件预览,React实现在线预览docx，xslx，pdf格式文件

React文件预览,React实现在线预览docx，xslx，pdf格式文件

#React文件预览,React实现在线预览docx，xslx，pdf格式文件| 来源: 网络整理| 查看: 265

一、前言

由于项目需要实现文件的预览功能，通过查询百度找到了一个组件，就是react-file-viewer，其官方API中描述可支持文件格式有以下格式：图片：png，jpeg，gif，bmp，包括360度图片 pdf格式 CSV xslx docx 视频：mp4，webm 音频：mp3

但是经过我的测试发现它可以打开docx，xslx格式的文件，pdf格式的文件有时能打开有时打不开的（我刚开始测试的时候pdf格式的文件就一直打不开，但是当项目写完测试的时候发现又能打开pdf格式的文件了）。所以当时开发的时候就选择了用react-pdf-js插件来打开pdf。

二、使用react-file-viewer实现docx，xlsx文件的预览

1.安装react-file-viewe

npm install react-file-viewer

2.组件中引入react-file-viewe

//react文件预览支持docx，xlsx import FileViewer from 'react-file-viewer';

3.使用

render() { const {type } = this.state; return ( display: this.state.fileState }} className={styles.filesBox}> styles.x} src={x} onClick={this.closeFile.bind(this)} alt="" /> { type == 'docx' ?//判断类型是否为docx xiangmu} //文件地址 /> : type == 'xlsx' ?//判断类型是否为xlsx ceshi} //文件地址 /> : '' } ) }

css

.filesBox{ width: 40%; height: 86%; display: flex; left: 25%; background: #fff; justify-content: center; align-items: center; position: absolute; border: 1px solid #eee; border-radius: 12px; .fileTop{ color: #333; background-color: #f8f8f8; border: 1px solid #eee; height: 42px; line-height: 42px; padding: 0 80px 0 20px; .x{ position: absolute; cursor: pointer; top: 16px; right: 20px; z-index: 2; } } .flieContent{ width: 100%; height: calc(100% - 42px); } }

效果代码：在这里插入图片描述

在这里插入图片描述

三、使用react-pdf-js实现pdf文件的预览

1.安装react-pdf-js.

npm install react-pdf-js

2.组件中引入react-pdf-js

//react预览pdf文件插件 import PDF from 'react-pdf-js';

3.使用

biji}//文件地址 onDocumentComplete={this.onDocumentComplete} page={page}//文件页码 /> page === 1 ? null : styles.filePdfPage}> 第{page}页/共{pages}页 {page === pages ? null : marginLeft: '10px' }} type='primary' onClick={this.handleNext}>下一页 }

css

.flieContent{ width: 100%; height: calc(100% - 42px); } .filePdf{ width: 100%; height: calc(100% - 84px); display: flex; justify-content: center; overflow: scroll; overflow-x: hidden; } .filePdfFooter{ height: 42px; width: 100%; display: flex; justify-content: center; align-items: center; } .filePdfPage{ margin: 0 10px; }

//获取所有页 onDocumentComplete = (pages) => { this.setState({ page: 1, pages }) } //点击上一页 handlePrevious = () => { this.setState({ page: this.state.page - 1 }) } //点击下一页 handleNext = () => { this.setState({ page: this.state.page + 1 }) }

效果：在这里插入图片描述

四、全部代码 import React from 'react'; import styles from './styles.less'; import xiangmu from '@/assets/DocumentSharing/项目建议书.docx'; import ceshi from '@/assets/DocumentSharing/测试统计数据.xlsx'; import biji from '@/assets/DocumentSharing/笔记.pdf'; import x from '@/assets/DocumentSharing/x.png'; import { Button } from 'antd'; //react文件预览支持docx，xlsx import FileViewer from 'react-file-viewer'; //react预览pdf文件插件 import PDF from 'react-pdf-js'; class Files extends React.Component { constructor(props) { super(props); this.state = { fileState: props.fileState,//父类传递的fileState type: props.fileType,//父类传递的fileType page: 1, pages: null, } } componentWillReceiveProps(nextProps) {//props发生变化时执行 this.setState({ fileState: nextProps.fileState,//父类传递的fileState type: nextProps.fileType,//父类传递的fileType }) } closeFile() { this.setState({ fileState: 'none', }) this.props.goToFile('none'); } //获取所有页 onDocumentComplete = (pages) => { this.setState({ page: 1, pages }) } //点击上一页 handlePrevious = () => { this.setState({ page: this.state.page - 1 }) } //点击下一页 handleNext = () => { this.setState({ page: this.state.page + 1 }) } render() { const { page, pages, type } = this.state; return ( display: this.state.fileState }} className={styles.filesBox}> styles.x} src={x} onClick={this.closeFile.bind(this)} alt="" /> { type == 'docx' ? xiangmu} //文件地址 /> : type == 'xlsx' ? ceshi} //文件地址 /> : type == 'pdf' ? biji} onDocumentComplete={this.onDocumentComplete} page={page} /> page === 1 ? null : styles.filePdfPage}> 第{page}页/共{pages}页 {page === pages ? null : marginLeft: '10px' }} type='primary' onClick={this.handleNext}>下一页 } : '' } ) } } export default Files;

【本文地址】

React文件预览,React实现在线预览docx，xslx，pdf格式文件

React文件预览,React实现在线预览docx，xslx，pdf格式文件

今日新闻

推荐新闻